import {ModalForm, DrawerForm, ProFormSelect, ProFormText, ProFormUploadDragger, ProFormUploadButton, ProFormDependency, ProFormRadio} from "@ant-design/pro-components";
import IHttp, {IAxiosResponse} from "@/services/http.service";
import React, {useEffect, useState} from "react";
import {Form, message} from "antd";
import { firstValueFrom } from "rxjs"
import environment from "@/environment";
import { UploadProps } from "antd"
import { UploadChangeParam } from "antd/es/upload"
import { UploadRequestOption as RcCustomRequestOptions } from "rc-upload/lib/interface"

import IHelper from "@/services/helper.service";

type CreateFormProps = {
  name: string
  bili_bvid: string
}

type IProps = {
  item: API.VideoItem | undefined
  onCancel: () => void
  onRefreshTable: () => void
}

export default function VideoCreateForm({item, onCancel, onRefreshTable}: IProps) {
  const [form] = Form.useForm<CreateFormProps>();
  const open = Boolean(item)
  useEffect(() => {
    if (open) {
      form.setFieldsValue({
        name: item?.name || "", 
        bili_bvid: item?.bili_bvid || "",
      })
    }
  }, [open])
  return (
    <DrawerForm<CreateFormProps>
      width={360}
      open={open}
      form={form}
      title={item?.id ? "编辑视频" : "新建视频"}
      onFinish={async (values) => {
        const postData = {
          name: values.name || "", 
          bili_bvid: values.bili_bvid || "",
          type: 1,
        }
        if (Object.values(postData).some(e => !e)) {
          message.error("信息不完整！")
          return
        }
        let res: IAxiosResponse | undefined = undefined
        if (item?.id) {
          res = await firstValueFrom(IHttp.updateVideo(item.id, postData))
        } else {
          res = await firstValueFrom(IHttp.createVideo(postData))
        }
        if (res?.status) {
          message.success(item?.id ?  "更新成功" : "创建成功")
          onRefreshTable()
        }
      }}
      drawerProps={{
        destroyOnClose: true,
        onClose: onCancel,
        maskClosable: false,
      }}
    >
      <ProFormText
        name="name"
        label="名称"
        tooltip="最长为 24 位"
        placeholder="请输入名称"
        rules={[
          {required: true}
        ]}
      />

      <ProFormText
        name="bili_bvid"
        label="bili_bvid"
        tooltip="B站视频bvid"
        placeholder="请输入bvid"
        rules={[
          {required: true}
        ]}
      />
      
      
    </DrawerForm>
  )
}
